<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<html>
<head>
    <title>员工管理</title>
    <link rel="stylesheet" type="text/css" href="/static/js/jquery-easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="/static/js/jquery-easyui/themes/icon.css">
    <script type="text/javascript" src="/static/js/jquery-easyui/jquery.min.js"></script>
    <script type="text/javascript" src="/static/js/jquery-easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="/static/js/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>

<script>
    //格式化部门
    function formatterDept(value,row,index) {
        if(value){return value.name;}
    }
    //格式化状态
    function formatterState(value,row,index) {
        if(value == 0){ return "正常";}
        return "<span style='color: red'>离职</span>";
    }
    //格式化管理员
    function formatterAdmin(value,row,index) {
        if(value){
            return "是";
        }
        return "否";
    }


    $(function () {

        //数据表格渲染
        $("#employeeDatagrid").datagrid({
            url:"/employee/list",
            fit:true,
            fitColumns:true,
            border:false,
            rownumbers:true,
            pagination:true,
            singleSelect:true,
            toolbar:'#employeeDatagridToolbar',
            columns:[[
                {field:'username',title:'用户名',width:100},
                {field:'realName',title:'姓名',width:100},
                {field:'tel',title:'电话',width:100},
                {field:'email',title:'邮箱',width:100},
                {field:'department',title:'部门',width:100,formatter:formatterDept},
                {field:'inputTime',title:'录入时间',width:100},
                {field:'status',title:'状态',width:100,formatter:formatterState},
                {field:'admin',title:'管理员',width:100,formatter:formatterAdmin}
            ]]
        });
        //弹窗渲染
        $("#employeeDialog").dialog({
            title:"emp",
            buttons:'#employeeDialogButtons',
            closed:true,
            width:500

        });

       
       
    });

    function exportEmp() {
        window.location.href="/employee/exportEmp";
    }


        //高级查询
        function searchEmp() {

            //1.获取查询input里面的值
            var keyword = $("#keyword").val();
            var beginDate = $("#beginDate").val();
            var endDate = $("#endDate").val();
            var deptId = $("#comboboxDeptMain").val();

            //2.调用datagrid重新加载数据,并且带上查询条件  keyword
            $("#employeeDatagrid").datagrid("load",{keyword:keyword,beginDate:beginDate,endDate:endDate,deptId:deptId});
        }
        //员工添加
        function add() {
            //清空表单
            $("#employeeAddForm").form("clear");

            //显示添加弹窗
            $("#employeeDialog").dialog("setTitle","add");
            $("#employeeDialog").dialog("open");
        }
        //员工删除
        function deleteEmp() {
            //获取选中行
            var selectedRow = $("#employeeDatagrid").datagrid("getSelected");

            //判断是否选中行
            if(!selectedRow){
                $.messager.alert("提示","请选择一行","error");
                return;
            }
            //给出notice确认要删除吗
            $.messager.confirm("提示","想删除 [ "+selectedRow.realName+" ]吗",function (yes) {
                if(yes){

                    //发送ajax请求执行删除
                    $.post("/employee/delete" , {id:selectedRow.id},function (data) {
                        if(data.success){
                            $.messager.alert("提示","操作成功","info",function () {
                                reload();
                            });
                        }else{
                            $.messager.alert("提示",data.msg,"error");
                        }

                    });
                }
            })
        }
        //员工编辑
        function edit() {
            //获取选中行
            var selectedRow = $("#employeeDatagrid").datagrid("getSelected");

            //判断是否选中行
            if(!selectedRow){
                $.messager.alert("提示","请选择一行","error");
                return;
            }
            //设置表单回显
            //清空表单
            $("#employeeAddForm").form("clear");

            //处理部门回显
            if(selectedRow.department){
                selectedRow['department.id'] = selectedRow.department.id;
            }
            $("#employeeAddForm").form("load",selectedRow);


            //角色回显
            $.post("/role/listIdsByEmployeeId",{employeeId:selectedRow.id},function (data) {
                $("#comboboxRole").combobox("setValue",data);
            });


            //弹出编辑框
            $("#employeeDialog").dialog("setTitle","edit");
            $("#employeeDialog").dialog("open");
        }
        //员工刷新
        function reload() {
            $("#employeeDatagrid").datagrid("reload");
        }
        //提交保存
        function save() {
            var url = "/employee/save";

            //获取员工的id
            var employeeId = $("#employeeId").val();
            if(employeeId){
                //编辑的url
                url = "/employee/update";
            }
            //提交表单
            $("#employeeAddForm").form("submit",{
                url:url,
                onSubmit:function (param) {
                    //拿到选中的所有角色
                    var values = $("#comboboxRole").combobox("getValues");
                    //遍历拼接成  :   roles[0].id = xx
                    for(var i = 0 ; i<values.length ; i++){
                        var id = values[i];
                        //给请求拼接角色的参数
                        param['roles['+i+'].id'] = id;
                    }
                },
                success:function (data) {
                    data = $.parseJSON(data);
                    if(data.success){
                        $.messager.alert("提示","操作成功","info",function () {
                            cancel();
                            reload();
                        });
                    }else{
                        $.messager.alert("提示",data.msg,"error");
                    }
                }
            });
        }
        //取消
        function cancel() {
            //关闭添加弹窗
            $("#employeeDialog").dialog("close");
        }

    

  

</script>
</head>
<body>
    <%--工具条--%>
    <div id="employeeDatagridToolbar">
        
            <a class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="add()">增加</a>
        
        
            <a class="easyui-linkbutton" iconCls="icon-edit" plain="true"  onclick="edit()">编辑</a>
        
        
            <a class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="deleteEmp()">删除</a>
       
       
            <a class="easyui-linkbutton" iconCls="icon-reload" plain="true" onclick="reload()">刷新</a>
        
        
            <a class="easyui-linkbutton" iconCls="icon-reload" plain="true" onclick="exportEmp()">输出</a>

        <input  id="beginDate"  type= "text" class= "easyui-datebox" required ="required" name="beginDate"> </input>

        <input  id="endDate"  type= "text" class= "easyui-datebox" required ="required" name="endDate"> </input>
        <td>部门 &nbsp;<input id="comboboxDeptMain" class="easyui-combobox" name="dept.id"
                   data-options="valueField:'id',textField:'name',url:'/department/listAll'" />   </td>


        <span>关键字:</span>
        <input class="easyui-textbox" id="keyword">
        <a class="easyui-linkbutton" iconCls="icon-search" plain="true" onclick="searchEmp()">查询</a>

    </div>

    <%--表格--%>
    <table id="employeeDatagrid"></table>
    <%--添加的弹框--%>
    <div id="employeeDialog" style="padding: 10px">
        <form id="employeeAddForm" method="post">
            <input type="hidden" name="id" id="employeeId">
            <table>
                <tr>
                    <td>用户名</td> &nbsp;&nbsp;
                    <td><input name="username" class="easyui-textbox"> </td>
                </tr>

                <tr>
                    <td>姓&emsp;名&nbsp;&nbsp;</td>
                    <td><input name="realName" class="easyui-textbox"> </td>
                </tr>
                <tr>
                    <td>电&emsp;话&nbsp;&nbsp;</td>
                    <td><input name="tel" class="easyui-textbox"> </td>
                </tr>
                <tr>
                    <td>邮&emsp;箱&nbsp;&nbsp;</td>
                    <td><input name="email" class="easyui-textbox"> </td>
                </tr>
                <tr>
                    <td>部&emsp;门&nbsp;&nbsp;</td>
                    <td><input id="comboboxDept" class="easyui-combobox" name="department.id"
                               data-options="valueField:'id',textField:'name',url:'/department/listAll'" />   </td>
                </tr>
                <tr>
                    <td>角&emsp;色&nbsp;&nbsp;</td>
                    <td><input id="comboboxRole" class="easyui-combobox"
                               data-options="multiple:true,valueField:'id',textField:'name',url:'/role/listAll'" />   </td>
                </tr>
            </table>
        </form>
    </div>
    <%--弹窗的底部工具--%>
    <div id="employeeDialogButtons">
        <a class="easyui-linkbutton" iconCls="icon-ok" plain="true"  onclick="save()" >save</a>
        <a class="easyui-linkbutton" iconCls="icon-cancel" plain="true" onclick="cancel()">cancel</a>
    </div>

</body>
</html>
